<template>
  <div id="inStocks">
    <!-- 卡片区域 -->
    <el-card>
      <!-- 搜索部分 -->
      <el-form :inline="true" :model="queryMap" class="demo-form-inline">
        <el-form-item label="类型">
          <el-select clearable v-model="queryMap.type"
                     placeholder="请选择入库类型"
                     @clear="search" value="">
            <el-option v-for="item in type"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"
                       @click.native="search"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单号">

          <el-input
            clearable=""
            @clear="search"
            v-model="queryMap.outNum"
            placeholder="请输入入库单查询"
            @keyup.enter.native="search"
            class="input-with-select"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="queryMap.status" placeholder="请选择状态" value="">
            <el-option v-for="item in status"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"
                       @click.native="search"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            :clearable="false"
            v-model="range"
            type="datetimerange"
            :value-format="'yyyy-MM-dd HH:mm:ss'"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" type="warning" @click="clearTime">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" icon="el-icon-plus" @click="addStocks">出库</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="button" icon="el-icon-download">导出</el-button>
        </el-form-item>

      </el-form>
      <!-- 表格区域 -->
      <el-table v-loading="loading" :data="tableData" border style="width: 100%;" height="395">
        <el-table-column label="#" prop="id" width="50"></el-table-column>
        <el-table-column prop="outNum" :show-overflow-tooltip='true' label="出库单号" width="180"></el-table-column>
        <el-table-column prop="type" label="发放类型" width="100">
          <template slot-scope="scope">
            <el-tag effect="plain" size="mini" type="success" v-if="scope.row.type===0">政府领取</el-tag>
            <el-tag effect="plain" size="mini" type="danger" v-else-if="scope.row.type===1">医院领取</el-tag>
            <el-tag effect="plain" size="mini" type="warning" v-else-if="scope.row.type===2">小区领取</el-tag>
            <el-tag effect="plain" size="mini" type="info" v-else-if="scope.row.type===3">个人领取</el-tag>
            <el-tag effect="plain" size="mini" v-else-if="scope.row.type===4">其他领取</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="priority" label="紧急程度" width="180">
          <template slot-scope="scope">
            <el-rate
              :disabled="true"
              v-model="scope.row.priority"
              show-text
              :texts="['不急','常规','紧急','特急','超急']"
            >
            </el-rate>
          </template>
        </el-table-column>
        <el-table-column prop="productNumber" label="数量" sortable="" width="100"></el-table-column>
        <el-table-column prop="consumerName" label="发放地点" width="180"></el-table-column>
        <el-table-column prop="consumerPhone" label="联系方式" width="150"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag size="mini" effect="plain" v-if="scope.row.status===0">已入库</el-tag>
            <el-tag size="mini" type="danger" effect="plain" v-if="scope.row.status===1">回收</el-tag>
            <el-tag size="mini" effect="plain" type="warning" v-if="scope.row.status===2">审核中</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="operator" label="操作员" width="180"></el-table-column>
        <el-table-column prop="createTime" label="出库时间" sortable="" width="180"></el-table-column>
        <el-table-column label="操作" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button icon="el-icon-view" @click="detail(scope.row)"
                       type="text" size="small">明细
            </el-button>

            <!--                        给操作员使用的按钮-->
            <span v-if="scope.row.status===0">
              <el-popconfirm
                @confirm="remove(scope.row.id)"
                style="margin-left: 20px;"
                confirmButtonText='好的'
                cancelButtonText='不用了'
                icon="el-icon-info"
                iconColor="red"
                title="这是一段内容确定移入回收站吗？"
              >
              <el-button type="text" slot="reference" size="mini" icon="el-icon-s-operation">回收站</el-button>
            </el-popconfirm>
            </span>
            <!--   给操作员使用的按钮(回收站)-->
            <span v-if="scope.row.status===1">
              <el-popconfirm
                @confirm="back(scope.row.id)"
                style="margin-left:10px;"
                confirmButtonText='好的'
                cancelButtonText='不用了'
                icon="el-icon-info"
                iconColor="green"
                title="这是一段内容确定恢复数据吗？"
              >
                <el-button type="text" slot="reference" size="mini"
                           icon="el-icon-s-operation">还原</el-button>
              </el-popconfirm>
              <el-popconfirm
                style="margin-left:20px;"
                @confirm="del(scope.row)"
                title="这是一段内容确定删除吗？"
              ><el-button type="text" slot="reference" size="small" icon="el-icon-delete">删除</el-button>
              </el-popconfirm>
            </span>

            <!--                        给审核员使用的按钮-->
            <span v-if="scope.row.status===2">
              <el-popconfirm
                style="margin-left:20px;"
                @confirm="publish(scope.row)"
                title="审核通过后库存将更新,是否通过"
              ><el-button type="text" slot="reference" size="small" icon="el-icon-refresh">通过</el-button>
              </el-popconfirm>
              <el-popconfirm
                style="margin-left:20px;"
                @confirm="del(scope.row)"
                title="这是一段内容确定删除吗？">
                <el-button type="text" slot="reference" size="small" icon="el-icon-delete">删除</el-button>
              </el-popconfirm>
            </span>

          </template>
        </el-table-column>
      </el-table>
      <!-- 分页部分 -->
      <el-pagination
        style="margin-top:10px;"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[6, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>


      <!-- 入库明细弹窗-->
      <el-dialog title="出库明细" :modal-append-to-body="false" :visible.sync="dialogVisible" @close="closeDetail"
                 width="60%">
        <!--                来源信息-->
        <el-card class="box-card" style="margin-bottom: 10px;">
          <div class="text item">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <span style="font-size: 11px;color: #303030;">省区市:</span> &nbsp;<el-tag size="mini">
                  {{consumer.address}}
                </el-tag>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <span style="font-size: 11px;color: #303030;">具体位置:</span> &nbsp;<el-tag size="mini">
                  {{consumer.name}}
                </el-tag>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <span style="font-size: 11px;color: #303030;">联系人 :</span> &nbsp;<el-tag size="mini">
                  {{consumer.contact}}
                </el-tag>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <span style="font-size: 11px;color: #303030;">电话 : </span>&nbsp;<el-tag size="mini">
                  {{consumer.phone}}
                </el-tag>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <!--                步骤条-->
        <el-steps simple v-if="pStatus===0" style="margin-left: 10px;margin-bottom: 5px;" :space="200" :active="3"
                  finish-status="success">
          <el-step title="提交出库单"></el-step>
          <el-step title="审核出库单"></el-step>
          <el-step title="出库成功"></el-step>
        </el-steps>
        <el-steps simple v-if="pStatus===2" style="margin-left: 10px;margin-bottom: 5px;" :space="200" :active="2"
                  finish-status="success">
          <el-step title="提交出库单"></el-step>
          <el-step title="审核出库单"></el-step>
          <el-step title="出库成功"></el-step>
        </el-steps>
        <span>
          <template>
            <el-table height="260" max-height="350" border :data="detailTable" style="width: 100%">
              <el-table-column prop="name" label="名称"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="pnum" label="商品编号"></el-table-column>
               <el-table-column prop="model" label="规格"></el-table-column>
              <el-table-column
                prop="imageUrl"
                label="图片"
                align="center"
                width="150px"
                padding="0px"
              >
                <template slot-scope="scope">
                  <el-image :src="scope.row.imageUrl" style="width: 30px;height: 30px">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column prop="count" label="数量"></el-table-column>
              <el-table-column prop="unit" label="单位"></el-table-column>
            </el-table>
            <!--              明细分页-->
        <el-pagination
          style="margin-top:20px;"
          background
          @current-change="handleDetailSizeChange"
          :current-page="pageNum"
          :page-size="3"
          layout="prev, pager, next,total"
          :total="this.detailTotal">
        </el-pagination>
          </template>
        </span>
      </el-dialog>

      <GetIntoStocks :addVisible="addStockVisible"
                     @changeShow="closeAddStock">
      </GetIntoStocks>

    </el-card>
  </div>
</template>

<script>
  import GetIntoStocks from './GetOutStocks'
  import { findOutStockList, back, publish, remove, del, detail } from '@/api/biz/outStocks'

  export default {
    components: {
      GetIntoStocks
    },
    data () {
      return {
        pickerOptions: {
          shortcuts: [
            {
              text: '今天(此刻)',
              onClick (picker) {
                const end = new Date()
                const start = new Date(new Date(new Date().toLocaleDateString()).getTime())
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '昨天',
              onClick (picker) {
                const end = new Date(new Date(new Date().toLocaleDateString()).getTime())
                const start = new Date(new Date(new Date().toLocaleDateString()).getTime())
                start.setTime(start.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近一周',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              }
            }, {
              text: '最近一个月',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              }
            }, {}, {
              text: '最近两个月',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 60)
                picker.$emit('pick', [start, end])
              }
            }, {
              text: '最近三个月',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', [start, end])
              }
            }]
        },
        status: [{
          'label': '已出库',
          'value': 0
        }, {
          'label': '回收站',
          'value': 1
        }, {
          'label': '待审核',
          'value': 2
        }],
        type: [{
          'label': '政府领取',
          'value': 0
        }, {
          'label': '医院领取',
          'value': 1
        }, {
          'label': '小区领取',
          'value': 2
        }, {
          'label': '个人领取',
          'value': 3
        }, {
          'label': '其他领取',
          'value': 4
        }, {
          'label': '全部类型',
          'value': ''
        }],
        consumer: {},
        detailTotal: 0,
        pageNum: 1,
        detailId: undefined,
        loading: true,
        detailTable: [],
        dialogVisible: false,//入库明细弹窗
        addStockVisible: false,//添加入库弹窗
        size: 6,
        total: 100,
        current: 1,
        queryMap: {
          status: 0
        },
        tableData: [],
        range: [],//时间范围
        pStatus: '',//步骤flag
      }
    },
    methods: {
      /**
       * 关闭明细
       */
      closeDetail () {
        this.pageNum = 1
      },
      clearTime () {
        this.queryMap = {
          status: 0
        }
        this.queryMap.startTime = null
        this.queryMap.endTime = null
        this.range = []
      },
      //打开添加入库弹窗
      addStocks () {
        this.addStockVisible = true
      },
      //关闭添加入库
      closeAddStock (data) {
        this.addStockVisible = data !== 'false'
      },
      //
      showAdd (data) {
        this.addStockVisible = data !== 'false'
      },

      /**
       * 移至回收站
       */
      remove (id) {
        remove(id).then(res => {
          if (res.code === 200) {
            this.$message('回收成功')
            this.loadTableData()
          }
        })
      },

      /**
       * 物资添加审核
       */
      publish (row) {
        publish(row.id, row.outNum).then(res => {
          if (res.code === 200) {
            this.$message('审核通过')
            this.loadTableData()
          }
        })
      },

      /**
       * 从回收站恢复
       */
      back (id) {
        back(id).then(res => {
          if (res.code === 200) {
            this.$message('恢复成功')
            this.loadTableData()
          }
        })
      },
      /**
       * 删除物资
       */
      del (row) {
        del(row.id, row.inNum).then(res => {
          if (res.code === 200) {
            this.$message('删除成功')
            this.loadTableData()
          }
        })
      },
      /**
       * 查看出库单明细
       */
      async detail (row) {
        this.detailId = row.id
        const res  = await detail(row.outNum, row.consumerId, this.pageNum)
        if (res.code === 200) {
          this.detailTable = res.data.records
          this.detailTotal = res.data.total
          this.consumer = res.data.consumer
          this.pStatus = row.status
          this.dialogVisible = true
        }
      },
      /**
       * 加载表格数据
       */
      async loadTableData () {
      
        if (this.range != null && this.range.length === 1) {
          this.queryMap.startTime = this.range[0]
        } else if (this.range != null && this.range.length === 2) {
          this.queryMap.startTime = this.range[0]
          this.queryMap.endTime = this.range[1]
        }
       
        findOutStockList(this.current, this.size, this.queryMap).then(res => {
          console.log(111);
          if (res) {
            console.log(res);
            this.total = res.data.total
            this.tableData = res.data.records
            console.log(this.tableData);
          }
        })
      },
      //当每页条数改变
      handleSizeChange (val) {
        this.size = val
        this.loadTableData()
      },

      //当前页码改变
      handleCurrentChange (val) {
        this.current = val
        this.loadTableData()
      },

      //当前明细页码改变
      handleDetailSizeChange (val) {
        this.pageNum = val
        this.detail()
      },

      /**
       * 查询入库单
       */
      search () {
        this.current = 1
        this.loadTableData()
      },

    },
    created () {
      this.loadTableData()
      setTimeout(() => {
        this.loading = false
      }, 1000)
    }
  }
</script>

